<template>
  <div class="introduce-fram" style="width: 80%;height: 80%">
    <div class="introduce-header">
      <h2>
        <lable>{{deptName}}</lable>
      </h2>
      <div class="introduce-img">
        <div class="introduce-img-left">
          <img :src="form.fileUrl" width="100%">
        </div>
        <div class="introduce-img-right">
          <h3>{{form.name}}</h3>
          <p v-html="form.qualification"></p>
        </div>
      </div>
    </div>

    <div class="introduce-com">
      <h4><span>工作经历</span></h4>
      <ul>
        <li>
          <p v-html="form.workExperience"></p>
        </li>
      </ul>
      <h4><span>主要特长</span></h4>
      <ul>
        <li>
          <p v-html="form.speciality"></p>
        </li>
      </ul>
      <h4><span>主讲课程</span></h4>
      <ul>
        <li>
          <p v-html="form.course"></p>
        </li>
      </ul>
      <h4><span>服务企业</span></h4>
      <ul>
        <li>
          <p v-html="form.servicePrices"></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { listTeacherInfo, getTeacherInfo, delTeacherInfo, addTeacherInfo, updateTeacherInfo } from "@/api/procure/teacherInfo";
export  default {
  name:'snapshot',
  props:{
    teacherId:{
      type:String,
      default:null
    }
  },
  data(){
    return{
      form:{},
      deptName:'',
    }
  },
  created() {
    this.deptName=this.$store.state.user.info.deptName
    this.getTeacher();
  },
  watch: {
    teacherId: {
      handler(newVal) {
        this.teacherId = newVal
        this.getTeacher();
      },
    }
  },
  methods:{
    getTeacher(){
      console.log(this.teacherId)
      getTeacherInfo(this.teacherId).then(response=>{
        this.form = response.data;
        console.log(this.form)
      })
    }
  }
}
</script>
<style scoped lang="scss">
/* CSS Document */
body,div,ul ,li ,p , h1, h2,h3,h4{padding:0; margin: 0;}
li{ list-style:none}
a{ text-decoration:none}
img{ border:none}

body {
  background:#F7F7F7;
  color:#666;
  font-size: 12px;
  font-family:"微软雅黑",Verdana, Arial, Helvetica, sans-serif	}

.introduce-fram{
  width:50%; background-color: #fff; position: relative;;
  margin:0 auto}

.introduce-header{ position: relative; padding: 8px 0; display:inline-block;width:100%;background-color: #4473C5;}

.introduce-header h2{width:100%;float: left;border-bottom: 1px solid #6D92D2;font-size:14px; color: #fff; font-weight: normal;padding-bottom:10px;}
.introduce-header h2 lable{float: left;  padding-left:20px;}
.introduce-header h2 span{ float: right; padding-right:20px;}

.introduce-img{position: relative;width: 100%; float: left; padding-top:15px;}
.introduce-img-left{margin-left: 20px; float:left;width:11%;  background-color: #F2F4F7;}
.introduce-img-left img{width: 100%; background-clip: unset;}
.introduce-img-right{float: left;width:80%; margin-left:30px;color: #fff;}
.introduce-img-right h3{font-size:22px; padding-bottom:5px;font-weight: normal;}
.introduce-img-right p{font-size: 14px; line-height:25px;}

.introduce-com{position: relative;margin:0 auto;width:100%; background: #fff; padding-bottom:10px;}
.introduce-com h4{position:relative;width: 100%; height: 20px; line-height:20px; margin-top:10px;background: url("../images/img03.png") repeat-x;}
.introduce-com h4 span{width: 16%; padding-left: 20px; height: 20px; display: inline-block; color:#fff;font-size:12px;background: url("../images/img02.png") no-repeat; background-size: 100%;}
.introduce-com ul{position:relative;width:100%;}
.introduce-com ul li{position: relative; width:100%; padding:1.5%; display: block; background: #F2F4F7;border-radius:10px; margin-top:6px; }
.introduce-com ul li b{font-size:14px; color: #1a5bcc; line-height:20px; display: block;}
.introduce-com ul li p{font-size:12px; color: #000; line-height:24px;}
</style>
